<template>
    <div class="log-container">
        <div class="page-center clearfix">
            <div class="left-section">
                <a href="/"><img src="@/assets/imgs/logo_8669.jpg" alt="思科（深圳）药物研发有限公司" /></a>
            </div>
            <div class="right-section">
                <el-input placeholder="可以输入货号、中文名、英文名、CAS号、分子量、分子式搜索" v-model="key">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { Message } from 'element-ui'
import router from '@/router'
const key = ref('')
const search = () => {
    console.log(key.value)
    if (!key.value) {
        return Message.info('请输入关键字！')
    }
    router.push({
        name: 'search',
        query: {
            key: key.value,
        },
    })
}
</script>
<style lang="scss" scoped>
.log-container {
    padding: 20px 0;
    width: 100%;
    border-bottom: 1px solid #ddd;

    .left-section {
        float: left;
        width: 40%;

        img {
            max-width: 100%;
        }
    }
    .right-section {
        width: 45%;
        padding: 20px 0;
        float: right;
    }
}
</style>
